<template>
	<div class="p-x-50 p-y-30 h-100% overflow-y-auto home">
		<div v-for="(item, i) in $store.guarder.Menus" :key="i" class="item">
			<div class="item_title flex items-center">
				<div class="line" />
				{{ item.meta.title }}
			</div>
			<el-row :gutter="20" class="m-t-15 p-x-15">
				<el-col v-for="(item2, i2) in item.children" :key="item2.meta.title" :span="4">
					<div class="flex item_content items-center" :class="{ 'm-t-10': i2 > 5 }" @click="routerFn(item2)">
						<my-icon :icon="item2.meta.icon" class="img" />
						<span>{{ item2.meta.title }}</span>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup name="home">
import { find } from '@u/tree';

/**
 * 路由跳转函数
 */
function routerFn(data) {
	$router.push({
		path: find(data, true, (item) => !item.children).path
	});
}
</script>

<style lang="scss" scoped>
.home {
	background: url('@/assets/img/home/background.png') center/cover no-repeat;
	background-color: #01dce729;

	.item {
		&_title {
			font-size: 20px;
			color: #333;

			.line {
				width: 4px;
				height: 1.1em;
				margin-right: 8px;
				margin-left: 3px;
				background: #d02926;
				border-radius: 10px;
			}
		}

		&_content {
			box-sizing: border-box;
			width: 100%;
			height: 80px;
			padding: 0 20px;
			font-size: 18px;
			color: #333;
			cursor: pointer;
			background: #fff;
			border-radius: 4px;
			box-shadow: 0 4px 10px 0 rgb(131 110 90 / 10%);
			backdrop-filter: blur(4px);
			transition: all 0.3s;

			.img {
				margin-right: 10px;
				font-size: 30px;
			}

			&:hover {
				font-size: 22px;
				font-weight: bold;
				background: linear-gradient(to right, rgb(255 255 255 / 30%), rgb(3 57 171 / 47%));
				box-shadow: 0 4px 10px 0 rgb(131 110 90 / 40%);
			}
		}
	}

	.item + .item {
		margin-top: 30px;
	}
}
</style>
